<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登录</title>
    <%
        String basePath = request.getScheme()
                + "://"
                + request.getServerName()
                + ":"
                + request.getServerPort()
                + request.getContextPath()
                + "/";
        pageContext.setAttribute("basePath",basePath);
    %>
    <!--写base标签，永远固定相对路径跳转的结果-->
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <!-- 导入 jquery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="static/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/admin.css" media="all">
    <link rel="stylesheet" href="static/css/login.css" media="all">

</head>
<body layadmin-themealias="default">

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" >

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>登入</h2>
            <p> </p>
        </div>
        <span class="errorMsg">
        </span>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                <input type="text" name="LoginName" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input" value="${requestScope.username}">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="LoginPassword" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                        <input type="text" name="vercode" id="LAY-user-login-vercode"  placeholder="图形验证码" class="layui-input"> <!--lay-verify="required"-->
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;height: 37px;text-align: center; line-height:35px; border: 1px solid black" id="yzm">

                            <a href="javascript:void(0)" style="display: block;height: 35px;text-align: center; line-height:35px;" id="valuesYZM"></a>

                            <!--<img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">-->
                        </div>
                    </div>
                </div>
            </div>
            <!--            <div class="layui-form-item" style="margin-bottom: 20px;">-->
            <!--                <input type="checkbox" name="remember" lay-skin="primary"  title="记住密码"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i class="layui-icon layui-icon-ok"></i></div>-->
            <!--                <a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <label>社交账号登入</label>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

                <a href="page/user/reg.jsp" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
            </div>
        </div>
    </div>

</div>
<script src="layer.js"></script>
<script src=" https://www.layuicdn.com/layui/layui.js"></script>
<script>
    //验证码
    function createCode($){
        code = '';//首先默认code为空字符串
        var codeLength = 4;//设置长度，这里看需求，我这里设置了4
        //设置随机字符
        var random = new Array(0,'a',1,'b',2,'c',3,'d',4,'e',5,'f',6,'g',7,'h',8,'i',9,'j','A','k','B','l','C','m','D','n','E','o','F','p','G','v','q','H','r','I','z','J','K','s','u','L','M','t','N','O','P','Q','R','y','S','T','U','V','W','w','X','Y','x','Z');
        for(var i = 0; i < codeLength; i++){ //循环codeLength 我设置的4就是循环4次
            var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36
            code += random[index]; //字符串拼接 将每次随机的字符 进行拼接
            code+=" ";
        }
        $("#valuesYZM").text(code);//将拼接好的字符串赋值给展示的Value
    }
    layui.use(['jquery','layer','form'],function (){
        var $=layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
        createCode($);
        //验证码Div加载点击事件
        $("#yzm").bind('click',function() {
            createCode($);
            return false;
        });
        form.on('submit(LAY-user-login-submit)', function(obj){
            //console.log(data);
            var field = obj.field;
            var valueYZM=$("#valuesYZM").text().replace(/\s+/g,"").toLowerCase();
            if(field.vercode==""){
                layer.msg('验证码不能为空!',{icon:5,time:1000,anim:6},function(){
                    $("input[name='vercode']").focus();
                    createCode($);
                    return false;
                });
            }else if(field.vercode.toLowerCase()!=valueYZM){
                layer.msg('验证码不正确!',{icon:5,time:1000,anim:6},function(){
                    $("input[name='vercode']").focus();
                    createCode($);
                    return false;
                });
            }else{
                $.post('userServlet?action=login',{username:field.LoginName,password:field.LoginPassword},function(res){
                    if(res == "true"){
                        layer.msg('登入成功', {
                            offset: '15px'
                            ,icon: 1
                            ,time: 1000
                        }, function(){
                            location.href = 'client/petServlet?action=list'; //后台主页
                        });
                    }else{
                        layer.msg('用户名或密码不正确!',{icon:2, offset: '15px',time:1000,anim:6});
                        createCode($);
                    }
                })
            }
            return false;
        });
    })
</script>

<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style>
<div class="layui-layer-move"></div>
</body>
</html>